<template>
  <div>

    <el-breadcrumb separator="/" style="margin-bottom:20px;font-size:14px;">
      <el-breadcrumb-item :to="{ path: '/govmain' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>{{userinfo.departmentName}}{{sysinfo.year}}年{{sysinfo.season}}季度季报进度</el-breadcrumb-item>
    </el-breadcrumb>
    <el-tabs type="border-card">
      <el-tab-pane :label="userinfo.departmentName+sysinfo.year+'年'+sysinfo.season+'季度季报进度'">
        <el-row>
          <el-col :span="4" >
            <el-date-picker
              v-model="currentYear"
              value-format="yyyy"
              align="right"
              type="year"
              placeholder="选择年">
            </el-date-picker>
          </el-col>
          <el-col :span="4" :offset="1">
            <el-select v-model="quarter" placeholder="请选择">
              <el-option
                v-for="item in quarters"
                :key="item.id"
                :label="item.title"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4" :offset="1">
            <el-button type="primary" icon="search" @click="handleProcessSearch">搜索</el-button>
          </el-col>
        </el-row>
        <el-row style="padding-top:30px;">
            <el-table
            v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          header-cell-class-name="table-cell-head"
          :data="processList"
          border
          show-summary
          style="width: 100%">
          <el-table-column align="center"
            prop="name"
            label="地区名称">
          </el-table-column>
          <el-table-column
          align="center"
            prop="totalNum"
            label="旅行社总数">
          </el-table-column>
          <el-table-column
          align="center"
            prop="stopedNum"
            label="停业数">
          </el-table-column>
          <el-table-column
          align="center"
            prop="reportedNum"
            label="填报完成数">
          </el-table-column>
          <el-table-column
          align="center"
            prop="returnedNum"
            label="发回重填数"> 
          </el-table-column>
          <el-table-column
          align="center"
            prop="finishedNum"
            label="审核完成数">
          </el-table-column>
        </el-table>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  
  computed: {
    ...mapGetters(["processList", "userinfo", "sysinfo"])
  },
  created(){
    this.loading = true;
    const data = {
        code: this.userinfo.regionInfo.area_code,
        year: this.sysinfo.year,
        season: this.sysinfo.season
      };
    this.$nextTick(() => {
      this.getProcessList(data).then(()=>{
        this.loading = false;
      }).catch((e)=>{
        console.log(e);
      });
      
    });
  },
  data() {
    return {
      quarter: "",
      currentYear: "",
      loading: false,
      quarters: [
        {
          id: 1,
          title: "第一季度"
        },
        {
          id: 2,
          title: "第二季度"
        },
        {
          id: 3,
          title: "第三季度"
        },
        {
          id: 4,
          title: "第四季度"
        }
      ]
    };
  },
  methods: {
    ...mapActions(["getProcessList"]),
    handleProcessSearch(){
      const data = {
        code: this.userinfo.regionInfo.area_code,
        year:this.currentYear == "" ? this.sysinfo.year : this.currentYear,
        season:this.quarter == "" ? this.sysinfo.season : this.quarter
      };
      this.loading = true;
      this.getProcessList(data).then(() => {
        setTimeout(() => {
          this.loading = false;
        }, 1000);
      });
    },
  }
};
</script>
<style>
.table-cell-head {
  color: #409eff;
  white-space: nowrap;
}
</style>
